import SwitchTheme from "@/components/SwitchTheme";
import {useAppDispatch, useAppSelector} from "@/store/store.ts";
import {login} from "@/store/user";
import {Button, Form, Input} from "antd";
import {useState} from "react";
import {FaLock, FaUser} from "react-icons/fa";
import {useSearchParams} from "react-router-dom";
import styles from "./index.module.less"

const Login = () => {
    const dispatch = useAppDispatch();
    const [form] = Form.useForm()
    const [isSigning, setIsSigning] = useState(false)
    const [searchParams] = useSearchParams()
    const isLogin = useAppSelector(state => state.user.isLogin);




    const onSubmit = () => {
        setIsSigning(true)
        setTimeout(() => {
            setIsSigning(false)
            dispatch(login({token: "xxx", userInfo: {name:"Dong",id:"01"},from:searchParams.get("from")}))
        }, 500)
    }

    return (
        <div className={styles.login} hidden={isLogin}>
            <div className={styles.header}>
                <SwitchTheme/>
            </div>

            <Form
                form={form}
                autoComplete="off"
                className={styles.form}
                onSubmitCapture={onSubmit}
            >
                <div className={styles.title}>
                    登录
                </div>
                <Form.Item name={"username"}>
                    <Input prefix={<FaUser/>} placeholder={"用户名"} autoFocus/>
                </Form.Item>
                <Form.Item name={"password"}>
                    <Input prefix={<FaLock/>} type="password" placeholder={"密码"}/>
                </Form.Item>
                <Form.Item>
                    <Button
                        style={{width: "100%"}}
                        type="primary"
                        htmlType="submit" disabled={isSigning}
                        loading={isSigning}
                    >
                        登录
                    </Button>

                </Form.Item>
            </Form>

        </div>
    );
};

export default Login;
